<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小蛇和食物的旅程</title>
    <style>
        body {
            background: #c0c0c0;
        }
        .map {
            position: relative;
            width: 800px;
            height: 600px;
            background:#fdf6e3;
        }
    </style>
</head>
<body>
    <div class="map"></div>
    <script>
        // 获取地图元素
        var map = document.getElementsByClassName('map')[0];
        (function () {
            // 创建存储食物的数组，方便删除食物的方法查找食物对象
            var elements = [];
            // 创建食物Food构造函数，实例化的时候需要传入宽高和颜色，也可以不传，有默认值
            function Food(width,height,color) {
                // 样式
                this.width = width || 20;
                this.height = height || 20;
                this.color = color || 'pink';
                // 位置
                this.x = 0;
                this.y = 0;
            }
            // 添加初始化方法,调用时需要传入地图元素，因为需要获取宽高计算食物随机生成在地图上的位置还有插入进地图元素中
            Food.prototype.init = function (map) {
                // 每次创建新的食物应该清空map元素下的食物，所以调用删除
                this.remove();
                // 创建食物元素
                var cib = document.createElement('div');
                // 赋值属性 - 修饰成小方块
                cib.style.width = this.width + 'px';
                cib.style.height = this.height + 'px';
                cib.style.backgroundColor = this.color;
                // 生成位置
                this.x = Math.floor(Math.random() * (map.offsetWidth / this.width) * this.width);
                this.y = Math.floor(Math.random() * (map.offsetHeight / this.height) * this.height);
                // 赋值位置
                cib.style.left = this.x + 'px';
                cib.style.top = this.y + 'px';
                // 将食物添加进地图
                map.appendChild(cib);
                elements.push(cib);
                // 将食物元素添加进存储食物数组，方便找到食物元素，以便删除
            }
            // 添加移除食物方法
            Food.prototype.remove = function () {
                // 清空map元素下的食物
            }
            // 暴露对象给window
            window.Food = new Food();
        }())
        // 调用Food对象下的init初始方法,需要传入参数地图元素
        Food.init(map);
    </script>
</body>
</html>